<form [formGroup]="form">
  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="8">
      <nz-form-item>
        <nz-form-label>{{'GENERAL.BIZ_LEVEL.INSTITUTION' | i18n}}</nz-form-label>
        <nz-form-control nzHasFeedback="true">
          <app-aams-select
            level="institution"
            formControlName="acquirer"
            (ngModelChange)="handleChosenAcquirer($event)"></app-aams-select>
          <nz-form-explain *ngIf="form.get('acquirer').dirty && form.get('acquirer').errors">
            <ng-container>{{'VALIDATION.REQUIRED_SELECT' | i18nParams: {name: 'GENERAL.BIZ_LEVEL.INSTITUTION'} }}
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col [nzSpan]="8">
      <nz-form-item>
        <nz-form-label>{{'GENERAL.INSTITUTION.NAME' | i18n}}</nz-form-label>
        <nz-form-control>
          <input formControlName="acquirerName" name="acquirerName" nz-input />
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col [nzSpan]="8">
      <nz-form-item>
        <nz-form-label>{{'GENERAL.INSTITUTION.NAME_EN' | i18n}}</nz-form-label>
        <nz-form-control>
          <input formControlName="acquirerNameEN" name="acquirerNameEN" nz-input />
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>

  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="8">
      <nz-form-item>
        <nz-form-label>{{'GENERAL.BIZ_LEVEL.AGENT' | i18n}}</nz-form-label>
        <nz-form-control nzHasFeedback="true">
          <app-aams-select
            level="agent"
            [insCode]="chosenAcquirer!.code"
            formControlName="group"
            (ngModelChange)="handleChosenGroup($event)"></app-aams-select>
          <nz-form-explain *ngIf="form.get('group').dirty && form.get('group').errors">
            <ng-container>{{'VALIDATION.REQUIRED_SELECT' | i18nParams: {name: 'GENERAL.BIZ_LEVEL.AGENT'} }}
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col [nzSpan]="8">
      <nz-form-item>
        <nz-form-label>{{'GENERAL.AGENT.NAME' | i18n}}</nz-form-label>
        <nz-form-control>
          <input formControlName="groupName" name="groupName" nz-input />
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col [nzSpan]="8">
      <nz-form-item>
        <nz-form-label>{{'GENERAL.AGENT.NAME_EN' | i18n}}</nz-form-label>
        <nz-form-control>
          <input formControlName="groupNameEN" name="groupNameEN" nz-input />
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>

  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="8">
      <nz-form-item>
        <nz-form-label>{{'GENERAL.BIZ_LEVEL.MERCHANT' | i18n}}</nz-form-label>
        <nz-form-control nzHasFeedback="true">
          <app-aams-select
            level="merchant"
            formControlName="merchant"
            [insCode]="chosenAcquirer!.code"
            [agentCode]="chosenGroup!.code"
            (ngModelChange)="handleChosenMerchant($event)"></app-aams-select>
          <nz-form-explain *ngIf="form.get('merchant').dirty && form.get('merchant').errors">
            <ng-container>{{'VALIDATION.REQUIRED_SELECT' | i18nParams: {name: 'GENERAL.BIZ_LEVEL.MERCHANT'} }}
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col [nzSpan]="8">
      <nz-form-item>
        <nz-form-label>{{'GENERAL.MERCHANT.NAME' | i18n}}</nz-form-label>
        <nz-form-control>
          <input formControlName="merchantName" name="merchantName" nz-input />
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col [nzSpan]="8">
      <nz-form-item>
        <nz-form-label>{{'GENERAL.MERCHANT.NAME_EN' | i18n}}</nz-form-label>
        <nz-form-control>
          <input formControlName="merchantNameEN" name="merchantNameEN" nz-input />
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>

  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="8">
      <nz-form-item>
        <nz-form-label>{{'GENERAL.BIZ_LEVEL.STORE' | i18n}}</nz-form-label>
        <nz-form-control nzHasFeedback="true">
          <app-aams-select
            level="store"
            formControlName="store"
            [insCode]="chosenAcquirer!.code"
            [agentCode]="chosenGroup!.code"
            [intMerCode]="chosenMerchant!.code"
            (ngModelChange)="handleChosenStore($event)"></app-aams-select>
          <nz-form-explain *ngIf="form.get('store').dirty && form.get('store').errors">
            <ng-container>{{'VALIDATION.REQUIRED_SELECT' | i18nParams: {name: 'GENERAL.BIZ_LEVEL.STORE'} }}
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col [nzSpan]="8">
      <nz-form-item>
        <nz-form-label>{{'GENERAL.STORE.NAME' | i18n}}</nz-form-label>
        <nz-form-control>
          <input formControlName="storeName" name="storeName" nz-input />
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col [nzSpan]="8">
      <nz-form-item>
        <nz-form-label>{{'GENERAL.STORE.NAME_EN' | i18n}}</nz-form-label>
        <nz-form-control>
          <input formControlName="storeNameEN" name="storeNameEN" nz-input />
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
</form>